<template>
  <div class="content">
   
   
     <!-- 面包屑 -->
     <div class="mianbao">
      <el-breadcrumb separator-class="el-icon-arrow-right">
         <el-breadcrumb-item replace :to="{ path: '/personalCenter/myorder' }">个人中心</el-breadcrumb-item>
        <el-breadcrumb-item>保单详情</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div style="width: 1200px;margin: 20px auto;">
       <el-tabs type="border-card" >
      <el-tab-pane label="保险详情">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>套餐内容</span>
          </div>
          <div class="row1">
            <div class="zuo">
              电梯责任保险
            </div>
            <div class="you">
              <div class="qian" v-if="type==1">
                110元/部
              </div>
              <div class="qian" v-if="type==2">
                350元/部
              </div>
              <div class="qian" v-if="type==3">
                450元/部
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>保险方案</span>
          </div>
          <div class="row1">
            <div class="zuo">
              适用电梯
            </div>
            <div class="you">
              <div class="value" >
                所有电梯
              </div>
            </div>
          </div>
          <div class="row1">
            <div class="zuo">
              销售范围
            </div>
            <div class="you">
              <div class="value" >
                中国大陆(除港澳台地区)
              </div>
            </div>
          </div>
          <div class="row1">
            <div class="zuo">
              保险期限
            </div>
            <div class="you">
              <div class="value" >
                1年
              </div>
            </div>
          </div>
          <div class="row1">
            <div class="zuo">
                保单形式
            </div>
            <div class="you">
              <div class="value" >
                电梯保单
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>保障事项</span>
          </div>
          <div class="row1">
            <div class="zuo">
              累计责任限额
            </div>
            <div class="you">
              <div class="value" v-if="type==1">
                300万
              </div>
              <div class="value" v-if="type==2">
                400万
              </div>
              <div class="value" v-if="type==3">
                600万
              </div>
            </div>
          </div>
          <div class="neirong">
            在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的人身伤亡或财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的累计责任限额进行赔偿。
          </div>
          <div class="row1">
            <div class="zuo">
              每次事故责任限额
            </div>
            <div class="you">
              <div class="value" v-if="type==1">
                150万
              </div>
              <div class="value" v-if="type==2">
                200万
              </div>
              <div class="value" v-if="type==3">
                300万
              </div>
            </div>
          </div>
          <div class="neirong">
            在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的人身伤亡或财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每次事故责任限额进行赔偿。
          </div>
          <div class="row1">
            <div class="zuo">
              每人赔偿限额
            </div>
            <div class="you">
              <div class="value" v-if="type==1">
                40万
              </div>
              <div class="value" v-if="type==2">
                40万
              </div>
              <div class="value" v-if="type==3">
                40万
              </div>
            </div>
          </div>
          <div class="neirong">
            在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的人身伤亡或财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每人赔偿限额进行赔偿。
          </div>
          <div class="row1">
            <div class="zuo">
              每次事故每人医疗责任限额
            </div>
            <div class="you">
              <div class="value" v-if="type==1">
                5万
              </div>
              <div class="value" v-if="type==2">
                6万
              </div>
              <div class="value" v-if="type==3">
                8万
              </div>
            </div>
          </div>
          <div class="neirong">
            在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的医疗费用支出，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每次事故每人医疗责任限额进行赔偿。
          </div>
          <div class="row1">
            <div class="zuo">
              每次事故每人财产责任限额
            </div>
            <div class="you">
              <div class="value" v-if="type==1">
                2万
              </div>
              <div class="value" v-if="type==2">
                2万
              </div>
              <div class="value" v-if="type==3">
                3万
              </div>
            </div>
          </div>
          <div class="neirong">
            在保险期间及保险单明细表列明的地点范围内，被保险人所有、使用或管理的电梯(包括电梯、液压电梯、自动扶梯和自动人行道)，在运行过程中发生意外事故造成第三者的财产损失，依法应由被保险人承担的赔偿责任，保险人负责按照约定的每次事故每人财产责任限额进行赔偿。
          </div>
          <div class="row1">
            <div class="zuo">
                免赔
            </div>
            <div class="you">
              <div class="value" >
                每次事故绝对免赔额为500元或损失金额的5%，二者以高者为准
              </div>
            </div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="投保信息">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>套餐内容</span>
          </div>
          <div class="row1">
            <div class="zuo">
              电梯责任保险
            </div>
            <div class="you">
              <div class="qian" v-if="type==1">
                110元/部
              </div>
              <div class="qian" v-if="type==2">
                350元/部
              </div>
              <div class="qian" v-if="type==3">
                450元/部
              </div>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>投保人信息</span>
          </div>
          <el-descriptions v-if="info.insuranceOrderUserInfo" class="margin-top" title="投保人信息" :column="3" size="medium" border direction="vertical">
            <el-descriptions-item label="投保人">
              {{info.insuranceOrderUserInfo.insureName||''}}
            </el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">
              {{info.insuranceOrderUserInfo.insureCode||''}}
            </el-descriptions-item>
            <el-descriptions-item label="投保人联系电话">
              {{info.insuranceOrderUserInfo.insureMobile||''}}
            </el-descriptions-item>
            <el-descriptions-item label="投保人地址">
              {{info.insuranceOrderUserInfo.insureAddress||''}}
            </el-descriptions-item>
            <el-descriptions-item label="起保时间">
              {{info.sTime||''}}
            </el-descriptions-item>
            <el-descriptions-item label="终保时间">
              {{zongbaotime(info.sTime)||''}}
            </el-descriptions-item>
            <el-descriptions-item label="保费">
              {{info.policyMoney?info.policyMoney+'元':''}}
            </el-descriptions-item>
            
            <el-descriptions-item label="被保人(公司名称)">
              {{info.insuranceOrderUserInfo.insuredName||''}}
            </el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">
              {{info.insuranceOrderUserInfo.insuredCode||''}}
            </el-descriptions-item>
            <el-descriptions-item label="被保人地址">
              {{info.insuranceOrderUserInfo.insuredAddress||''}}
            </el-descriptions-item>
            <el-descriptions-item label="电梯座落地址">
              {{info.insuranceOrderUserInfo.insuredLiftAddress||''}}
            </el-descriptions-item>
            <el-descriptions-item label="营业执照"  >
              <ImagePreview
                :src="info.insuranceOrderUserInfo.insuredBusinessLicense"
                width="100px"
                height="100px"
                :prediv-src-list="[info.insuranceOrderUserInfo.insuredBusinessLicense]"
              />
            </el-descriptions-item>
            <el-descriptions-item v-if="info.proNum" label="保单号">
              {{info.proNum||''}}
            </el-descriptions-item>
            <el-descriptions-item v-if="info.policyUrl" label="电子保单">
               <el-link type="primary" :href="info.policyUrl" target="_blank">预览保单</el-link>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>电梯信息</span>
            
          </div>
          <el-table
          v-if="info.insuranceOrderLiftList&&info.insuranceOrderLiftList.length>0"
            :data="info.insuranceOrderLiftList"
            style="width: 100%" max-height="300px">
            <el-table-column
              prop="liftNum"
              label="电梯注册代码"
              min-width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <el-link @click="goeledetail(scope.row)">{{scope.row.liftNum}}</el-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="liftBrand"
              label="品牌型号"
              width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="liftPermit"
              label="《电梯准用证》号码" min-width="160" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="liftPeriod"
              label="《电梯准用证》有效期"
              width="160" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="liftSpeed"
              label="运行速度(m/s)"
              width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="liftUseTime"
              label="投入使用时间"
             width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="hasProfessional"
              label="有无专职管理人员"
             width="130" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ scope.row.hasProfessional==1 ? '有' : '无' }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="weight"
              label="载重量(kg)"
              width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
              prop="permitCertificateImg"
              label="电梯准用证图片"
             width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <ImagePreview
                  v-if="scope.row.permitCertificateImg"
                  :src="scope.row.permitCertificateImg"
                  width="50px"
                  height="50px"
                  :prediv-src-list="[scope.row.permitCertificateImg]"
                />
              </template>
            </el-table-column>
            <el-table-column
              prop="conformityCertificateImg"
              label="电梯合格证图片"
              width="120" show-overflow-tooltip>
              <template slot-scope="scope">
                <ImagePreview
                  v-if="scope.row.conformityCertificateImg"
                  :src="scope.row.conformityCertificateImg"
                  width="50px"
                  height="50px"
                  :prediv-src-list="[scope.row.conformityCertificateImg]"
                />
              </template>
            </el-table-column>
            
          </el-table>
          
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="理赔流程" name="third">
        <el-timeline>
          <el-timeline-item timestamp="1" placement="top">
            <el-card>
              <h4>出险报案</h4>
              <p>出险后请尽快拨打保司统一客服热线95518申请报案。</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="2" placement="top">
            <el-card>
              <h4>提交材料</h4>
              <p>按工作人员指引填写理赔信息，提供相关理赔材料。</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="3" placement="top">
            <el-card>
              <h4>资料审核</h4>
              <p>收齐理赔资料后，保司将尽快完成理赔材料审核最长不超过30天;</p>
            </el-card>
          </el-timeline-item>
          <el-timeline-item timestamp="4" placement="top">
            <el-card>
              <h4>完成理赔</h4>
              <p>确属保险责任的，保司将在达成理赔协议后将保险金支付至被保人或受益人指定账户，如有疑问随时拨打95518。</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-tab-pane>
    </el-tabs>
    </div>
   
    
    <div class="dabtn">
      <el-button type="info" class="btn" @click="submitForm">返回</el-button>
    </div>
    
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { bxdetail,} from "@/api/bx.js"
export default {
  name: "goodDetail",//个人中心 
  data() {
    return {
      loading: false, // 加载状态
      type:0,
      info:{},
      
    };
  },
  
  mounted() {
    var type=this.$route.query.type
    this.type=type
     var id=this.$route.query.id
     this.getdetail(id)
  },
  
  methods: {
    getdetail(id){
      bxdetail(id).then(res=>{
        console.log(res)
        this.info=res.data
      })
    },
    ...mapActions(['changeeleObj','changeCurrentmenu']),

    goeledetail(item){
      this.changeeleObj(item)
      this.$router.push({path:"/eleAdd",query:{type:3,qiantype:this.type,id:this.$route.query.id} })

    },
    submitForm() {
      this.$router.push({path:"/personalCenter/myorder" })
      this.changeCurrentmenu('1')
    },
    zongbaotime(date){
      let date1=new Date(date)
      let date2=this.getDateOneYearLater(date1)
      return date2
    },
    getDateOneYearLater(date) {
      // 如果未传入参数，使用当前日期
      if (!date) {
        date = new Date();
      }
      // 如果传入的是字符串，尝试转换为 Date 对象
      if (typeof date === 'string') {
        date = new Date(date);
      }
      // 确保参数是有效的 Date 对象
      if (!(date instanceof Date) || isNaN(date.getTime())) {
        throw new Error('无效的日期');
      }
      
      // 计算一年后的日期
      let year = date.getFullYear() + 1;
      let month = date.getMonth();
      let day = date.getDate();
      
      // 获取一年后月份的最后一天
      let lastDayOfNextYearMonth = new Date(year, month + 1, 0).getDate();
      
      // 如果当前日期超过了一年后月份的最后一天，则使用最后一天
      if (day > lastDayOfNextYearMonth) {
        day = lastDayOfNextYearMonth;
      }
      
      // 创建一年后的日期对象
      return new Date(year, month, day, date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds());
    },
  },
  
};
</script>
<style scoped lang="scss">
.content{
  padding-bottom: 45px;
  background: #fff;
  .mianbao{
    max-width: 1200px;
    margin:0  auto 16px;
    padding-top: 20px;
  }
  .box-card{
    max-width: 1200px;
    margin: 25px auto 30px;
    .row1{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
      .zuo{
        font-size: 16px;
        color: #333333;
      }
      .you{
        font-size: 16px;
        color: #999999;
        .qian{
          color: #165DFF;
          font-weight: bold;
        }
      }
    }
    .neirong{
      width: 100%;
      height: fit-content;
      padding: 16px;
      box-sizing: border-box;
      background: rgba(22, 93, 255, .1);
      border-radius: 8px;
      font-weight: 400;
      font-size: 14px;
      color: #165DFF;
      line-height: 27px;
      text-indent: 2rem;
      margin-bottom: 20px;
    }
  }
  .dabtn{
    max-width: 1200px;
    margin: 30px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn{
      width: 100%;
      height: 80px;
      margin: 30px auto;
      display: block;
      font-size: 40px;
    }
  }
  

}
</style>
